<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
interface Newsinfo {
  title: string
  imgUrl: string
  readNum: number
  tab: string
  favoriteNum: number
}
const info: Newsinfo = {
  imgUrl: '',
  title: '什么病挂什么科，一遍文章带你了解~',
  tab: '科普',
  readNum: 88,
  favoriteNum: 43,
}
</script>

<template>
  <view class="card-box">
    <view class="card">
      <image class="image" :src="info.imgUrl" />
      <text class="title">{{ info.title }}</text>
      <text class="tab">{{ info.tab }}</text>
      <text class="read-num">阅读 {{ info.readNum }}</text>
      <text class="favorite-num">点赞{{ info.favoriteNum }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 300rpx;
  background: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx;
  position: relative;
  display: flex;
  align-items: center;

  .image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background: #eee;
  }

  .title {
    font-size: large;
    position: absolute;
    left: 260rpx;
    top: 40rpx;
  }

  .tab {
    position: absolute;
    left: 260rpx;
    top: 170rpx;
    background: #f4fafc;
    border-radius: 10rpx;
    padding: 5rpx 15rpx;
    color: #79b4cd;
    font-size: 33rpx;
  }

  .read-num {
    position: absolute;
    right: 150rpx;
    top: 220rpx;
    color: #999;
  }

  .favorite-num {
    position: absolute;
    right: 30rpx;
    top: 220rpx;
    color: #999;
  }
}
</style>
